<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      body {
        margin: 0;
        background-image: url("./imgs/bg.jpg");
        background-size: cover;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 使整个页面的高度占满视口 */
      }

      #title {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: row;
      }

      #title img {
        width: 100px; /* 根据需要调整图像的大小 */
        margin-bottom: 10px; /* 调整图像和标题之间的间距 */
      }

      h1,
      h2 {
        font-size: 32px;
        color: rgb(0, 150, 215);
        margin: 0;
      }

      .el-card {
        width: 600px;
        height: 300px;
        margin-top: 20px; /* 调整卡片与标题之间的间距 */
        background-color: rgba(255, 255, 255, 0.3);
      }

      .el-form {
        width: 400px;
        margin: 30px auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="title">
        <img src="./imgs/shark.png" alt="logo" />
        <h1>注册酷鲨商城账户</h1>
        <h2>Register Kushamall account</h2>
      </div>
      <el-card
        style="
          width: 600px;
          height: 350px;
          margin: 0 auto;
          background-color: rgb(255, 255, 255, 0.3);
        "
      >
        <el-form style="width: 400px; margin: 30px auto" label-width="80px">
          <el-form-item label="用户名">
            <el-input
              type="text"
              v-model="user.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="user.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              type="password"
              v-model="rePassword"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input
              type="text"
              v-model="user.nick"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="reg()">注册</el-button>
          <a
            style="
              margin-top: -30px;
              position: relative;
              left: 45%;
              font-size: 14px;
              color: #333;
              text-decoration: none;
            "
            href="./login.html"
          >
            已有账号，前往登录
          </a>
        </el-form>
      </el-card>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import axios -->
  <script src="./js/axios.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data() {
        return {
          user: {
            username: "",
            password: "",
            nick: "",
          },
          rePassword: "",
        };
      },
      methods: {
        reg() {
          //1、发送请求 2、接受返回信息 3、处理返回信息
          if (v.user.password != v.rePassword) {
            alert("两次密码不一致");
          } else {
            axios.post("user/reg", v.user).then(function (response) {
              //处理返回信息
              if (response.data.code == 1) {
                alert("用户名已存在，请前往登录页面登录 ");
              } else if (response.data.code == 2) {
                v.$message.success = "注册成功";
                location.href = "./login.html";
              } else {
                v.$message.error = "出现错误";
              }
            });
          }
        },
      },
    });
  </script>
</html>
